<template>
	<div class="box">
		<div class="from">
			<h3>{{ fromInfo.city_name }}</h3>
			<p>{{ fromInfo.high_in_desc }}</p><br>
			<p>{{ fromInfo.low_in_desc }}</p><br><br>
			<p>{{ fromInfo.out_desc }}</p><br>
		</div>
		<hr>
		<div class="to">
			<h3>{{ toInfo.city_name }}</h3>
			<p>{{ toInfo.high_in_desc }}</p><br>
			<p>{{ toInfo.low_in_desc }}</p><br><br>
			<p>{{ toInfo.out_desc }}</p><br>
		</div>
	</div>
</template>

<script>

import api from '../api'
	export default{
		data(){
			return{
				fromInfo:{},
				toInfo:{}
			}
		},
		props:{
			citys:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		mounted(){
			api.getTravelQuery({
				key:"f6d723e675ce920c63f995f31ae3161e",
				from:this.citys[0].value,
				to:this.citys[1].value
			}).then(res=>{
				if(res.status === 200){
					this.fromInfo = res.data.result.from_info;
					this.toInfo = res.data.result.to_info;
				}
			})
		}
	}
</script>

<style>
	*{
		padding:0;
		margin:0;
		box-sizing:border-box;
	}
	.box{
		padding:10px;
	}
	h3{
		line-height:20px;
		margin-top:10px;
		font-size:20px;
	}
</style>